<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统状态测试 - 工业物联网数据采集系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --success-color: #27ae60;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #3498db;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), #34495e) !important;
            box-shadow: 0 6px 30px rgba(0,0,0,0.15);
            backdrop-filter: blur(10px);
        }
        
        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .navbar-nav .nav-link {
            font-weight: 500;
            margin: 0 10px;
            transition: all 0.3s ease;
            border-radius: 20px;
            padding: 8px 16px !important;
        }
        
        .navbar-nav .nav-link:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        
        .container {
            padding-top: 40px;
        }
        
        .card {
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            border: none;
            backdrop-filter: blur(15px);
            background: rgba(255, 255, 255, 0.95);
        }
        
        .card-header {
            background: linear-gradient(135deg, var(--primary-color), #34495e);
            color: white;
            border-radius: 20px 20px 0 0 !important;
            border: none;
            padding: 20px 30px;
        }
        
        .status-ok { 
            color: var(--success-color);
            font-weight: 600;
        }
        
        .status-error { 
            color: var(--danger-color);
            font-weight: 600;
        }
        
        .status-loading { 
            color: var(--info-color);
            font-weight: 600;
        }
        
        .btn {
            border-radius: 30px;
            padding: 10px 25px;
            transition: all 0.3s ease;
            border: none;
            font-weight: 500;
            margin: 5px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .status-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            border-left: 4px solid var(--info-color);
        }
        
        .status-section h5 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .list-unstyled li {
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        
        .list-unstyled li:last-child {
            border-bottom: none;
        }
        
        .small {
            font-size: 0.9rem;
        }
        
        .row .col-md-6 {
            margin-bottom: 20px;
        }
        
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0,0,0,.1);
            border-radius: 50%;
            border-top-color: var(--info-color);
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 统一导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-industry me-2"></i>
                工业物联网数据采集系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">
                            <i class="fas fa-home me-1"></i>主控台
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-chart-line me-1"></i>监控仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/device-manager">
                            <i class="fas fa-cogs me-1"></i>设备管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/device-config">
                            <i class="fas fa-plus-circle me-1"></i>快速配置
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/status-test">
                            <i class="fas fa-stethoscope me-1"></i>系统诊断
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <h3 class="mb-0">
                            <i class="fas fa-stethoscope me-2"></i>
                            系统状态检测与诊断
                        </h3>
                        <p class="mb-0 mt-2 opacity-75">全面检测系统各组件运行状态和性能指标</p>
                    </div>
                    <div class="card-body">
                        <div class="status-section">
                            <h5><i class="fas fa-plug me-2"></i>API连接测试</h5>
                            <div id="apiStatus" class="status-loading">
                                <div class="loading-spinner"></div>
                                正在检测API连接状态...
                            </div>
                        </div>
                        
                        <div class="status-section">
                            <h5><i class="fas fa-server me-2"></i>系统服务状态</h5>
                            <div id="serviceStatus">
                                <div class="loading-spinner"></div>
                                正在检查服务状态...
                            </div>
                        </div>
                        
                        <div class="status-section">
                            <h5><i class="fas fa-chart-bar me-2"></i>服务统计信息</h5>
                            <div id="statsInfo">
                                <div class="loading-spinner"></div>
                                正在收集统计数据...
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <button class="btn btn-primary" onclick="testSystemStatus()">
                                <i class="fas fa-sync me-1"></i>重新检测
                            </button>
                            <a href="/" class="btn btn-secondary">
                                <i class="fas fa-home me-1"></i>返回主控台
                            </a>
                            <a href="/dashboard" class="btn btn-success">
                                <i class="fas fa-chart-line me-1"></i>查看监控仪表盘
                            </a>
                            <a href="/device-manager" class="btn btn-info">
                                <i class="fas fa-cogs me-1"></i>设备管理
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        async function testSystemStatus() {
            const apiStatusDiv = document.getElementById('apiStatus');
            const serviceStatusDiv = document.getElementById('serviceStatus');
            const statsInfoDiv = document.getElementById('statsInfo');
            
            // 重置状态
            apiStatusDiv.innerHTML = '<div class="loading-spinner"></div>正在检测API连接状态...';
            apiStatusDiv.className = 'status-loading';
            serviceStatusDiv.innerHTML = '<div class="loading-spinner"></div>正在检查服务状态...';
            statsInfoDiv.innerHTML = '<div class="loading-spinner"></div>正在收集统计数据...';
            
            try {
                console.log('开始测试系统状态API...');
                const response = await fetch('/api/system/status');
                console.log('API响应状态:', response.status);
                
                if (response.ok) {
                    const data = await response.json();
                    console.log('API响应数据:', data);
                    
                    if (data.success) {
                        apiStatusDiv.innerHTML = '<i class="fas fa-check-circle me-2"></i>API运行正常';
                        apiStatusDiv.className = 'status-ok';
                        
                        // 显示服务状态
                        const services = data.data.services_status;
                        let serviceHtml = '<div class="row">';
                        
                        const serviceItems = [
                            { key: 'engine_available', name: '数据引擎', icon: 'fas fa-cog' },
                            { key: 'storage_available', name: '存储服务', icon: 'fas fa-database' },
                            { key: 'alarm_available', name: '报警服务', icon: 'fas fa-bell' },
                            { key: 'scheduler_available', name: '调度服务', icon: 'fas fa-clock' }
                        ];
                        
                        serviceItems.forEach(item => {
                            const status = services[item.key];
                            const statusClass = status ? 'status-ok' : 'status-error';
                            const statusIcon = status ? 'fas fa-check-circle' : 'fas fa-times-circle';
                            const statusText = status ? '可用' : '不可用';
                            
                            serviceHtml += `
                                <div class="col-md-6 col-lg-3 mb-3">
                                    <div class="text-center p-3 border rounded">
                                        <i class="${item.icon} fa-2x mb-2 text-primary"></i>
                                        <h6 class="mb-1">${item.name}</h6>
                                        <span class="${statusClass}">
                                            <i class="${statusIcon} me-1"></i>${statusText}
                                        </span>
                                    </div>
                                </div>
                            `;
                        });
                        
                        serviceHtml += '</div>';
                        serviceStatusDiv.innerHTML = serviceHtml;
                        
                        // 显示统计信息
                        let statsHtml = '<div class="row">';
                        
                        if (data.data.engine) {
                            const engine = data.data.engine;
                            statsHtml += `
                                <div class="col-md-6">
                                    <h6><i class="fas fa-cog me-2 text-primary"></i>数据引擎统计</h6>
                                    <ul class="list-unstyled">
                                        <li><strong>总设备数:</strong> <span class="text-primary">${engine.total_devices || 0}</span></li>
                                        <li><strong>在线设备:</strong> <span class="text-success">${engine.connected_devices || 0}</span></li>
                                        <li><strong>采集次数:</strong> <span class="text-info">${engine.total_collections || 0}</span></li>
                                        <li><strong>成功次数:</strong> <span class="text-success">${engine.successful_collections || 0}</span></li>
                                        <li><strong>失败次数:</strong> <span class="text-danger">${engine.failed_collections || 0}</span></li>
                                    </ul>
                                </div>
                            `;
                        }
                        
                        if (data.data.storage) {
                            const storage = data.data.storage;
                            statsHtml += `
                                <div class="col-md-6">
                                    <h6><i class="fas fa-database me-2 text-primary"></i>存储服务统计</h6>
                                    <ul class="list-unstyled">
                                        <li><strong>数据点数:</strong> <span class="text-primary">${storage.data_points || 0}</span></li>
                                        <li><strong>设备数:</strong> <span class="text-info">${storage.devices || 0}</span></li>
                                        <li><strong>标签数:</strong> <span class="text-info">${storage.tags || 0}</span></li>
                                        <li><strong>SQLite:</strong> <span class="${storage.backends.sqlite ? 'text-success' : 'text-danger'}">${storage.backends.sqlite ? '✅ 可用' : '❌ 不可用'}</span></li>
                                    </ul>
                                </div>
                            `;
                        }
                        
                        statsHtml += '</div>';
                        statsInfoDiv.innerHTML = statsHtml;
                        
                    } else {
                        apiStatusDiv.innerHTML = `<i class="fas fa-times-circle me-2"></i>API返回错误: ${data.error}`;
                        apiStatusDiv.className = 'status-error';
                    }
                } else {
                    apiStatusDiv.innerHTML = `<i class="fas fa-times-circle me-2"></i>HTTP错误: ${response.status} ${response.statusText}`;
                    apiStatusDiv.className = 'status-error';
                }
            } catch (error) {
                console.error('测试失败:', error);
                apiStatusDiv.innerHTML = `<i class="fas fa-times-circle me-2"></i>网络错误: ${error.message}`;
                apiStatusDiv.className = 'status-error';
                
                // 清空其他区域
                serviceStatusDiv.innerHTML = '<p class="text-muted">无法获取服务状态信息</p>';
                statsInfoDiv.innerHTML = '<p class="text-muted">无法获取统计信息</p>';
            }
        }
        
        // 页面加载时自动测试
        document.addEventListener('DOMContentLoaded', testSystemStatus);
    </script>
</body>
</html> 